<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户交易量详情</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <include file="Index/common_css"/>
    <link href="__PUBLIC__/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/common/css/dataTables.bootstrap.css" rel="stylesheet">
    <!--分页样式-->
    <style type="text/css">
        div.green-black{padding:3px;margin:3px;text-align:center;}
        div.green-black a{border:#2c2c2c 1px solid;padding:2px 5px;background: #2c2c2c;color:#fff;margin:0 2px 0 0;text-decoration:none;}
        div.green-black a:hover{border:#aad83e 1px solid;background:#aad83e;color:#fff;}
        div.green-black a:active{border:#aad83e 1px solid;background:#aad83e;color:#fff;}
        div.green-black span.current{border:#aad83e 1px solid;padding:2px 5px;font-weight:bold;background:#aad83e;color:#fff;margin:0 2px 0 0;}
        div.green-black span.disabled{border:#f3f3f3 1px solid;padding:2px 5px;color:#ccc;margin:0 2px 0 0;}
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{$each[0]['login']}  一年交易详情</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">入金:{$deposit}</a>
                        <a class="dropdown-toggle" data-toggle="dropdown">出金:{$withdrawal}</a>
                        <a class="close-link">总获利:{$profit|round=###,2}</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>


    <div class="col-sm-12">
        <div class="panel blank-panel">

            <div class="panel-heading">
                <div class="panel-title m-b-md">
                    <h4>交易详情</h4>
                </div>
                <div class="panel-options">

                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="Mt4_detailed.html#tab-4">历史交易</a></li>
                        <li class=""><a data-toggle="tab" href="Mt4_detailed.html#tab-5">统计概括</a></li>
                    </ul>
                </div>
            </div>

            <div class="panel-body">
                <div class="tab-content">
                    <div id="tab-4" class="tab-pane active">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                <tr class="gradeX" style="text-align: center;">
                                    <th>订单号</th>
                                    <th>MT4账号</th>
                                    <th>交易品种</th>
                                    <th>交易类型</th>
                                    <th>交易量</th>
                                    <th>开仓时间</th>
                                    <th>平仓时间</th>
                                    <th>开仓价格</th>
                                    <th>平仓价格</th>
                                    <th>S/L</th>
                                    <th>T/P</th>
                                    <th>手续费</th>
                                    <th>库存费</th>
                                    <th>获利</th>
                                    <th>备注</th>
                                </tr>
                                </thead>
                                <tbody>
                                <foreach name="history" item="his">
                                    <tr class="gradeX" style="text-align: center;">
                                        <td>{$his.ticket}</td>
                                        <td><span class="pie">{$his.login}</span></td>
                                        <td>{$his.symbol}</td>
                                        <td><if condition="$his.cmd eq 1">SELL<else/>BUY</if></td>
                                        <td>{$his['volume']/100|round=###,2}</td>
                                        <td>{$his.open_time}</td>
                                        <td>{$his.close_time}</td>
                                        <td>{$his.open_price}</td>
                                        <td>{$his.close_price}</td>
                                        <td>{$his.sl}</td>
                                        <td>{$his.tp}</td>
                                        <td><span class="pie">{$his.commission}</span></td>
                                        <td>{$his.swaps}</td>
                                        <td>{$his.profit|round=###,2}</td>
                                        <td>{$his.comment|round=###,2}</td>
                                    </tr>
                                </foreach>
                                </tbody>
                            </table>
                            <div class="green-black">{$page}</div>
                        </div>
                    </div>


                    <div id="tab-5" class="tab-pane">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                <tr class="gradeX" style="text-align: center;">
                                    <th>MT4账号</th>
                                    <th>交易品种</th>
                                    <th>交易量</th>
                                    <th>交易单数</th>
                                    <th>获利</th>
                                </tr>
                                </thead>
                                <tbody>
                                <foreach name="each" item="each">
                                    <tr class="gradeX" style="text-align: center;">
                                        <td>{$each.login}</td>
                                        <td><span class="pie">{$each.symbol}</span></td>
                                        <td>{$each['volume']/100|round=###,2}</td>
                                        <td>{$each.count}</td>
                                        <td>{$each.profit|round=###,2}</td>
                                    </tr>
                                </foreach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- 全局js -->
<include file="Index/common_js"/>



<!-- ECharts -->
<script src="__PUBLIC__/common/echarts/echarts-all.js"></script>

<!-- 自定义js -->
<script src="__PUBLIC__/admin/js/content.js?v=1.0.0"></script>

<!-- ECharts demo data -->
<script  type="text/javascript">
    var data = {$data};
    var month=[];
    var volume=[];
    var min = {
        'month':data[0].class,
        'volume':data[0].volume
    };
    var max={
        'month':data[0].class,
        'volume':data[0].volume
    };
    for(var i=0;i<data.length;i++){
        month[i]=data[i].month;
        volume[i]=data[i].volume;
        if(min.volume>data[i].volume){
            min.volume=data[i].volume;
            min.month=data[i].class;
        }
        if(max.volume<data[i].volume){
            max.volume=data[i].volume;
            max.month=data[i].class;
        }

    }
    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
    var baroption = {
        title : {
            text: '一年交易量总结'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['月交易量']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'交易量',
                type:'bar',
                data: volume,
                markPoint : {
                    data : [
                        {name : '年最高', value : max.volume, xAxis: 0, yAxis: max.volume, symbolSize:20},
                        {name : '年最低', value : min.volume, xAxis: 1, yAxis: min.volume}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    barChart.setOption(baroption);
    window.onresize = barChart.resize;

    $("html, body").scrollTop(0).animate({scrollTop: $("#tab-4").offset().top});
</script>

</body>

</html>
